import * as React from 'react'
import { ImportButton } from '@/components/s-erp-import/import-card'
import { getSapTableCounts } from '@/lib/s-erp-import/actions'

export const dynamic = 'force-dynamic'

const TABLES = [
  'TB_SAP_EquipInfo',
  'TB_SAP_Order',
  'TB_SAP_OrderConfirm',
  'TB_SAP_OrderNotice',
  'TB_SAP_OrderBreakdown',
  'TB_SAP_MainternanceBOM',
  'TB_SAP_MaterialRepair',
  'TB_SAP_MaterialInfo',
  'TB_SAP_MaterialStock',
  'TB_SAP_MaterialRelease',
  'TB_SAP_MaterialReceiving',
  'TB_SAP_MaterialPurchase',
  // 새로 추가된 Technical Guidance 테이블들
  'Technical_Guidance_Investment',
  'Technical_Guidance_Order',
]

export default async function Page() {
  const counts = await getSapTableCounts(TABLES)

  return (
    <div className="container py-8" data-testid="s-erp-import-page">
      <h1 className="text-2xl font-bold mb-2" data-testid="page-title">S-ERP 데이터 임포트</h1>
      <p className='text-sm mb-6' data-testid="page-description">버튼을 클릭하여 엑셀 파일을 업로드 해주세요.</p>
      
      {/* RPA 가이드 정보 */}
      <div 
        className="mb-6 p-4 bg-gray-50 border rounded"
        data-testid="rpa-guide"
        style={{ display: 'none' }} // RPA가 필요할 때만 표시
      >
        <h3 className="font-semibold mb-2" data-testid="rpa-guide-title">RPA 사용 가이드</h3>
        <div className="text-sm space-y-1" data-testid="rpa-guide-content">
          <div data-testid="rpa-selector-info">
            <strong>셀렉터:</strong> [data-testid="upload-button-TABLE_NAME"]
          </div>
          <div data-testid="rpa-file-input-info">
            <strong>파일 입력:</strong> [data-testid="file-input-TABLE_NAME"]
          </div>
          <div data-testid="rpa-status-info">
            <strong>상태 확인:</strong> [data-testid="status-message-TABLE_NAME"]
          </div>
          <div data-testid="rpa-table-list-info">
            <strong>테이블 목록:</strong> [data-testid="table-list"]
          </div>
        </div>
      </div>

      <div className="flex flex-col gap-6" data-testid="table-list">
        {TABLES.map((name, index) => (
          <div 
            key={name} 
            data-testid={`table-row-${name}`}
            data-table-name={name}
            data-table-index={index}
          >
            <ImportButton tableName={name} count={counts[name] ?? 0} />
          </div>
        ))}
      </div>
    </div>
  )
}